<template>
	<view class="boxItem">
		<view class="delGoods">
			<view class="delGoodsItem">
				<view @click="clickIndexFn('0')" class="boxItemNav">
					<view class="titleNavAll" :class="{active: indexed=='0'}">未使用</view>
					<view :class="{'lineItem':true, 'lineColor': indexed=='0'?true:false}"></view>
				</view>
				<view @click="clickIndexFn('3')" class="boxItemNav">
					<view class="titleNavAll" :class="{active: indexed=='3'}">已使用/过期</view>
					<view :class="{'lineItem':true, 'lineColor': indexed=='3'?true:false}"></view>
				</view>
			</view>
		</view>
		<!-- //渲染数据 -->
		<view class="infoList_box">
			<view v-for="item in arrayList" class="coupon_item">
				<view class="coupon_item_left">
					<view class="couponValue">
						<text>￥</text>
						{{fenToYuan(item.couponValue)}}
					</view>
					<view class="couponName">
						<view>{{item.couponName}}</view>
						<text>{{item.expiredAt}}</text>
					</view>
				</view>
				<!-- 	<view :class="['check',item.receiveCouponId == coupon.receiveCouponId ? 'active' : '']">
			
				</view> -->
			<!-- 	<uni-icons size="30" type="checkbox-filled"
					:color="item.receiveCouponId == coupon.receiveCouponId ? '#eb5b1e' : '#cccccc'"></uni-icons> -->
					<view class="boxBtn" v-if="indexed == 0" @click="goPathFn(item)">立即使用</view>
					<view class="boxBtn disable" v-if="indexed == 3">已过期</view>
			</view>
			<!-- <view class="coup_box" v-for="item in arrayList">
				<view class="box_img">
					{{item.couponName}}
				</view>
				<view class="text_box">
					<view class="title_name">
						天天福利券 (任意店铺<span class="redBox">{{goPaObj(item)}}</span>)
					</view>
					<view class="boxUse">
						<view class="dataBox">{{item.expiredAt}}到期</view>
						<view class="boxBtn" v-if="indexed == 0" @click="goPathFn(item)">去使用</view>
						<view class="boxBtns" v-if="indexed == 3">已过期</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
     import MyMinix from '@/utils/minix/minix.js';
	import {
		getCoupnsInfo
	} from "@/request/api.js";
	import util from '@/utils/util.js';
	export default {
		mixins: [MyMinix],
		data() {
			return {
				indexed: 0,
				arrayList: []
			}
		},
		onLoad(option) {
			let that = this
			that.getCouponList()
			that.clickIndexFn('0')
		},
		methods: {
			clickIndexFn(status) {
				let that = this
				that.indexed = status
				that.getCouponList()
			},
			//跳转
			goPathFn(obj){
				console.log(obj);
				if(obj.storeIds.length>1){
					util.goToUrl("/pages/index/index")
				}else{
					if(obj.storeIds[0].length>1){
						util.goToUrl('/pages/index/index?storeId=' + sobj.storeIds[0])
					}else{
						util.goToUrl('/pages/index/index')
					}
				}
			},
			goPaObj(obj){
				let text = ""
				if(obj.storeIds.length>1){
					text ="专业券"
				}else{
					if(obj.storeIds[0].length>1){
						text ="专业券"
					}else{
						text ="通用券"
					}
				}
				return text
			},
			//获取优惠券数据
			async getCouponList() {
				let that = this
				that.arrayList = []
				let res = await getCoupnsInfo({
					method: "GET",
					data: {
						type: that.indexed,
						pageNo: 1,
						pageSize: 30,
					},
				})
				if (res.code == 200) {
					if(that.indexed == '0'){
						that.arrayList = res.result.unusedCoupons
					}else if(that.indexed == '3'){
						that.arrayList = res.result.usedOrExpiredCoupons
					}
					
					
					console.log(res, 'data444')
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxItem {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.delGoodsItem {
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding-bottom: 0rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		// box-shadow: 0px 3px 3px #f0f0f0;
		.boxItemNav {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size:32rpx;
			font-weight: 600;
			color: #7c7c7c;
			width: 200rpx;
			box-sizing: border-box;
			position: relative;
			padding:30rpx 0;
			
			
			.clorSize {
				color: #000 !important;
			}

			.titleNavAll {
				text-align: center;

			}

			.numItem {
				text-align: center;
				margin-top: 15rpx;
			}
			.active{
				color:#EB5B1E;
			}
			.lineColor {
				background-color: #EB5B1E;
				position: absolute;
			}

			.lineItem {
				width: 140rpx;
				height: 10rpx;
				border-radius: 5rpx;
				position: absolute;
				bottom: 0;
			}
		}

	}

	.infoList_box {
		width: 100vw;
		box-sizing: border-box;

		.coup_box {
			background-color: #fff;
			margin: 15rpx;
			border-radius: 5rpx;
			padding: 15rpx;
			display: flex;
			justify-content: space-between;

			.box_img {
				height: 150rpx;
				width: 250rpx;
				border: 1px solid #f0eeeb;
				line-height: 150rpx;
				font-size: 35rpx;
				text-align: center;
				border-radius: 2rpx;
				margin-right: 5rpx;

			}

			.text_box {
				.title_name {
					font-size: 31rpx;
					line-height: 50rpx;
					padding: 6rpx;
					border: 1px solid #f0eeeb;

					.redBox {
						color: red;
					}
				}

				.boxUse {
					margin-top: 10rpx;
					display: flex;
					padding: 6rpx;
					justify-content: space-between;
					position: relative;

					.dataBox {
						padding: 6rpx;
						border: 1px solid #f0eeeb;
						font-size: 25rpx;
					}

					.boxBtn {
						position: absolute;
						top: 29rpx;
						right: 0;
						color: #fff;
						padding: 7rpx;
						border-radius: 5rpx;
						background-color: #0000ff;
					}
					.boxBtns {
						position: absolute;
						top: 29rpx;
						right: 0;
						padding: 7rpx;
						border-radius: 5rpx;
					}
				}
			}
		}
	}

	.coupon_item {
		width: calc(100% - 140rpx);
		height: 115rpx;
		@include flexs(space-between, center);
		padding: 24rpx 40rpx;
		margin: 20rpx 30rpx 0;
		border-radius: 20rpx;
		background: #fff;
		position: relative;
	
		&:last-child {
			margin-bottom: 0;
		}
		
		.boxBtn{
			font-weight: 600;
			border: 2rpx solid #EB5B1E;
			border-radius: 32rpx;
			color:#EB5B1E;
			padding:10rpx 26rpx;
		}
		.disable{
			color:#666;
			border-color:#666;
		}
	
		// &_left{
		// 	@include flexs(space-between, center);
		// 	flex-
		// }
		&::after,
		&::before {
			position: absolute;
			content: '';
			width: 40rpx;
			height: 45rpx;
			border-radius: 50%;
			top: 50%;
			transform: translateY(-50%);
		}
	
		&::after {
			right: -20rpx;
			background: linear-gradient(to left, rgba(255, 255, 255, .6) 0%, rgba(0, 0, 0, 0.1) 100%);
		}
	
		&::before {
			left: -20rpx;
			background: linear-gradient(to right, rgba(255, 255, 255, .6) 0%, rgba(0, 0, 0, 0.1) 100%);
		}
	
		&>view:first-child {
		
			height: 80rpx;
			// width: 200rpx;
			@include flexs(space-between, center);
			// flex-direction: column;
			padding-left: 10rpx;
	
		}
	
		.couponValue {
			font-size:64rpx;
			color:#F01B1B;
			padding-right:50rpx;
			text{
				font-size:24rpx;
			}
		}
		.couponName{
			font-size:24rpx;
			font-weight: 600;
			&>view{
				margin-bottom:15rpx;
			}
		}
	
		.check {
			width: 40rpx;
			height: 40rpx;
			background: #fff;
			border: 2rpx solid #ccc;
			border-radius: 50%;
		}
	
		.active {
			background: #fa690a;
			border-color: #fa690a;
			position: relative;
	
			&::after {
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%) rotate(40deg);
				content: '';
				width: 10rpx;
				height: 20rpx;
				border-right: 5rpx solid #fff;
				border-bottom: 5rpx solid #fff;
			}
		}
	}
</style>